<!-- 转赠 -->
<template>
  <view class="draw-money-wrap">
    <view class="head-box">
      <view class="circle-container">
        <view class="circle-border">
          <view class="circle-outer">
            <view class="circle-middle">
              <view class="circle-inner">
                <view class="content">
                  <view class="num-title">公益基金池</view>
                  <view class="wallet-num">{{ publicPool || "0.00" }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="ripple ripple-1"></view>
        <view class="ripple ripple-2"></view>
      </view>
    </view>

    <view class="info-title"> 公益说明 </view>
    <view class="draMoney-info">
      <view class="info_item">
        <text>医疗健康：</text>
        帮助患有重大疾病但经济困难的患者补贴医疗费用，提供医疗援助</view
      >
      <view class="info_item">
        <text>教育帮扶：</text>
        资助贫困学生学习用品与助学金，帮助获得受教育的公平机会</view
      >
      <view class="info_item"
        ><text>社会福利：</text>
        用于特殊群体或孤寡老人的康复护理与心理关怀</view
      >
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, getCurrentInstance } from "vue";
import useStore from "../../stores/index";
import { getFoundation } from "../../api/index";

const publicPool = ref<number | string>(0);

// 使用 vuex store
const store = useStore();

// 通过 computed 获取 vuex 的 getters
const userInfo = computed(() => store.userInfo);

// 定义获取公共池数据的方法
const getPublicPool = () => {
  uni.showLoading({
    title: "加载中",
  });
  // 这里使用 proxy.$http 调用全局的 $http 方法
  getFoundation().then((res: any) => {
    publicPool.value = Number(res.data).toFixed(2);
    uni.hideLoading();
  });
};

// 组件挂载时调用 getPublicPool
onMounted(() => {
  getPublicPool();
});
</script>

<style lang="scss">
.head-box {
  margin-top: 72rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  // min-height: 400rpx;
  padding-bottom: var(--status-bar-height);
  width: 100%;
}

.circle-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
}

.circle-border {
  width: 90vw;
  height: 90vw;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #f7d396;
  position: relative;
  z-index: 1;
}

.circle-outer {
  width: 80vw;
  height: 80vw;
  border-radius: 50%;
  background-color: rgba(245, 193, 108, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-middle {
  width: 68vw;
  height: 68vw;
  border-radius: 50%;
  background-color: rgba(245, 193, 108, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-inner {
  width: 50vw;
  height: 50vw;
  border-radius: 50%;
  background-color: rgba(245, 193, 108, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.num-title {
  font-size: 26rpx;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 18rpx;
}

.wallet-num {
  font-size: 48rpx;
  font-weight: 500;
  color: #ffffff;
}

/* 扩散动画样式 */
.ripple {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(245, 193, 108, 0.8);
  opacity: 0;
  z-index: 0;
}

.ripple-1 {
  width: 50vw;
  height: 50vw;
  animation: ripple 4s infinite ease-out;
}
.ripple-2 {
  width: 40vw;
  height: 40vw;
  animation: ripple 6s infinite ease-out;
  animation-delay: 2s;
}

.info-title {
  text-align: center;
  margin: 48rpx auto;
  padding: 12rpx 18rpx;
  color: #fff;
  background: #f7d396;
  width: 240rpx;
  border-radius: 48rpx;
}

.draMoney-info {
  padding: 24rpx 48rpx;
  .info_item {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 24rpx;
    text {
      font-weight: bold;
      color: #000;
    }
  }
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0.8;
    border-width: 6px;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
    border-width: 20px;
  }
}
</style>
